<template>
    <div>
        <div class="opt-area-02">
            <div>
                <Select v-model="params.gong_an_comparison" style="width:200px" clearable placeholder="请选择比对状态" @on-change="StateChange">
                    <Option value="2">正确</Option>
                    <Option value="3">错误</Option>
                    <Option value="1">未比对</Option>
                </Select>
            </div>
            <div class="left-con">
                上报总材料数:<span>{{MaterialsNum}}&nbsp;&nbsp;</span>|
                上报总页数: <span>{{pageNum}} 页</span>
            </div>
        </div>
        <vxe-toolbar export custom></vxe-toolbar>
        <vxe-table
                border
                resizable
                highlight-hover-row
                export-config
                size="medium"
                :loading="countData.loading"
                align="center"
                header-align="center"
                :sort-config="{trigger: 'cell'}"
                :data="tableData"
                :checkbox-config="{checkField: 'checked'}">
            <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
            <vxe-table-column field="state" title="比对状态" width="150">
                <template v-slot:header="{ column }">
                    <span>{{ column.title }}</span>
                    <Tooltip :content="compareContent" theme="light" :transfer="true">
                        <Icon type="md-help-circle" />
                    </Tooltip>
                </template>
                <template slot-scope="{ row }">
                    <div style="color: green" v-if="row.gong_an_comparison == '2'">正确</div>
                    <div style="color: red" v-if="row.gong_an_comparison == '3'">错误<span style="cursor: pointer" @click="showImg(row)" v-if="row.img_explain">(查看说明)</span></div>
                    <div style="color: gray" v-if="row.gong_an_comparison != '2' && row.gong_an_comparison != '3'">未比对</div>
                </template>
            </vxe-table-column>
            <vxe-table-column field="recode_no" title="档号" width="150"></vxe-table-column>
            <vxe-table-column field="company_code" title="机构编号" width="100"></vxe-table-column>
            <vxe-table-column field="name" title="姓名" width="150"></vxe-table-column>
            <vxe-table-column field="idcard" width="180" title="身份证号"></vxe-table-column>
            <vxe-table-column field="sex" title="性别" width="140">
                <template slot-scope="{ row }">
                    <div v-if="row.sex == '0'">男</div>
                    <div v-if="row.sex == '1'">女</div>
                </template>
            </vxe-table-column>
            <vxe-table-column field="img_total" title="页数" width="140"></vxe-table-column>
            <vxe-table-column field="manager_recode_no" title="流水号" width="120" sortable></vxe-table-column>
            <vxe-table-column field="action" title="操作" width="200" fixed="right">
                <template  slot-scope="{ row }">
                    <Button class="table-action-btn" type="info" size="small" @click="showdetail(row)">详情</Button>
                    <Button v-if="params.type != 'reject' && row.state == 2 && tableData.length > 1" class="table-action-btn" type="error" size="small"
                            @click="returnDown(row)">驳回
                    </Button>
                </template>
            </vxe-table-column>
        </vxe-table>
        <vxe-modal v-model="showDetails" title="查看详情" width="800" height="500" resize>
            <template v-slot>
                <Carousel v-if="selectRow.img_explain">
                    <CarouselItem v-for="(item, index) in showImgList" :key="index">
                        <div style="width: 100%;display: flex;align-items: center;justify-content: center">
                            <div style="width: 400px">
                                <img :src="item" style="width: 100%">
                            </div>
                        </div>
                    </CarouselItem>
                </Carousel>
            </template>
        </vxe-modal>
    </div>
</template>

<script>
import { getRecordZSList, updateRejectOne, getMaterialsNumByPerson } from '@/api/record'
export default {
  props: {
    recordId: {
      type: String,
      default: () => {
        return ''
      }
    },
    receiveId: {
      type: String,
      default: () => {
        return ''
      }
    },
    type: {
      type: String,
      default: () => {
        return 'default'
      }
    }
  },
  data () {
    return {
      selectRow: '',
      showDetails: false,
      showImgList: [],
      compareContent: '姓名、身份证号与公安库比对后结果',
      row: {},
      searchObj: {},
      countData: { loading: true },
      params: { record_id: [], type: '', gong_an_comparison: '' },
      tableColumn: [
        { title: '档号', key: 'recode_no', width: 150, align: 'center' },
        { title: '机构编号', key: 'company_code', width: 100, align: 'center' },
        // { title: '状态', slot: 'state', width: 100, align: 'center' },
        { title: '姓名', key: 'name', width: 170, align: 'center' },
        { title: '身份证号', key: 'idcard', width: 160, align: 'center' },
        { title: '比对状态', slot: 'state', width: 150, align: 'center' },
        { title: '性别', slot: 'sex', width: 140, align: 'center' },
        { title: '页数', key: 'img_total', width: 140, align: 'center' },
        { title: '交接流水号', key: 'manager_recode_no', width: 120, align: 'center' },
        { title: '操作', align: 'center', minWidth: 200, slot: 'action', fixed: 'right' }
      ],
      tableData: [],
      x: [],
      pageNum: 0,
      MaterialsNum: 0
    }
  },
  mounted () {
  },
  methods: {
    showImg (row) {
      this.showImgList = row.img_explain.split(',')
      this.showDetails = true
      this.selectRow = row
      console.log(this.selectRow.img_explain)
    },
    getMaterialsNum () {
      getMaterialsNumByPerson(this.params).then(ret => {
        const data = ret.data
        if (data.errcode === 0) {
          this.MaterialsNum = data.data.num
        } else {
          this.error(data)
        }
      })
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getList () {
      this.countData.loading = true
      getRecordZSList(this.params).then(res => {
        if (res.data.errcode === 0 || res.data.errcode === 1001) {
          this.tableData = res.data.data
          this.pageNum = 0
          this.tableData.forEach(item => {
            if (item.img_total) this.pageNum += item.img_total
          })
          this.countData.loading = false
        } else {
          this.error(res.data)
          this.countData.loading = false
        }
      })
    },
    StateChange () {
      this.getList()
      this.getMaterialsNum()
    },
    returnDown (val) {
      this.$Modal.confirm({
        title: '确认驳回此人么？',
        content: '请仔细核对后再操作',
        loading: true,
        onOk: () => {
          this.rejectAction(val)
        }
      })
    },
    rejectAction (val) {
      const recordIds = this.recordId.split(',')
      const param = {
        id: this.receiveId, // 接收记录id
        recordId: recordIds, // 接收记录人员数组
        receiveId: val.id // 当前驳回人id
      }
      updateRejectOne(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Modal.remove()
          this.getList()
          this.getMaterialsNum()
          this.$emit('detailAction')
          this.success('驳回成功')
        } else {
          this.$Modal.remove()
          this.error(data)
        }
      })
    },
    showdetail (row, what) {
      this.$router.push({
        name: 'recordMaterials',
        query: { id: row.id, type: 'accept' },
        params: { options: this.recordId }
      })
    }
  },
  watch: {
    recordId (recordId) {
      let y = recordId
      this.x = y.split(',')
      this.params.record_id = this.$common.xeUtils.clone(this.x)
    },
    type (val) {
      this.params.type = val
    }
  }
}
</script>

<style scoped>
    .table-action-btn {
        margin-left: 5px;
    }

    .search-btn {
        width: 100px;
    }
    .opt-area-02 {
        display: flex;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }
    .opt-area-02 .left-con {
        font-size: 14px;
        width: 100%;
        margin-top: 7px;
        text-align: right;
    }
</style>
